<template>
  <div class="topnav-content">
  <div id="userselect" ref="userselect" width = "200px">
    <Treeselect ref="user_select_edt" v-model="userData" :multiple="false"  :options="options" :load-options="loadOptions" :noChildrenText="onNoChildrenText" @select="onSelect" placeholder=" 请选择人员..." />
  </div>
  <!--                :valueFormat="object"
                @select="onSelect"-->
  </div>
</template>
<script>
import {searchByOrgPath} from '@/api/user';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import {apiResult} from "@/libs/util";
export default {
  name: "userselect",
  components: {Treeselect},
  data() {
    return {
      userData:null,
      options: [],
      onNoChildrenText: "最后一级了",
      setCurrentVal: null,
    }
  },
  methods: {
    async loadOptions({ action/*, callback*/ }) { },
    getData () {},
    getOptions(val){
      this.options = val;
    },
    getValue(){
      if (!!this.userData ){
        let value = this.userData;
        if (value.indexOf("U_")==-1){
          this.$Message.error("只能选择用户，不要选择机构！");
          this.userData = null;
          return null;
        }
        if (value.split("_").length>0){
          return value.split("_")[1];
        }else{
          return this.userData;
        }
      }
      return null;
    },
    setValue(val){
      val = "U_" + val;
      this.setCurrentVal = val;
      if (!!this.options){ this.userData = this.setCurrentVal;}
    },
    onSelect(node, instanceId){
      if (node.arrt.type == "org"){
        this.$Message.error("不要选机构！");
      }
    }
  },
  mounted(){
    searchByOrgPath({}).then(res => {
      /** 机构id前辍 O_，用户id前辍U_*/
      apiResult(res.data,false,result=>{
        this.options = result.data;
      });
    });
  }
}
</script>
<style lang="less">
@import "./topnav";
</style>
